<template>
  <view class="pages">
    <view v-if="!addressDetails">
      <button @click="getAdress">点击获取地址</button>
    </view>
    <view class="address" v-else>
      <view class="details">{{ ads }}</view>
      <view class="user">
        <view class="name">{{ addressDetails.userName }}</view>
        <view class="tell">{{ addressDetails.telNumber }}</view>
      </view>
    </view>
    <view class="goods_cart">
      <view class="cart" v-if="cartList">
        <view class="goods-list">
          <view class="goods" v-for="item in cartList" :key="item.goods_id">
            <!-- 1 复选框 -->
            <!-- 2 图片 -->
            <view class="goods-img">
              <u-image
                width="100%"
                mode="widthFix"
                :src="item.goods_small_logo"
              ></u-image>
            </view>
            <!-- 3 名称 -->
            <view class="goods-info">
              <!-- 商品名称 -->
              <view class="goods-name u-line-2">{{ item.goods_name }}</view>
              <!-- 商品编辑栏 -->
              <view class="goods-tool">
                <view class="goods-price ">￥ {{ item.goods_price }}</view>
                <view class="goods-count">
                  <view class="goods-num">X {{ item.count }}</view>
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 全选 数据状态栏 -->
        <view class="status-tool">
          <!-- 全选 -->
          <!-- 总价 -->
          <view class="price">
            合计: <text>￥ {{ price }}</text>
          </view>
          <!-- 结算 -->
          <view class="settle" @click="goOrder">支付({{ number }})</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      addressDetails: uni.getStorageSync("address_details") || null,
      cartList: null,
    };
  },
  onLoad() {
    this.cartList = this.$store.state.cart_list;
  },
  computed: {
    ads() {
      if (!this.addressDetails) {
        return null;
      }
      const {
        cityName,
        countyName,
        detailInfo,
        provinceName,
      } = this.addressDetails;
      return provinceName + cityName + countyName + detailInfo;
    },
    price() {
      return this.$store.getters.allprice;
    },
    number() {
      return this.$store.getters.allcount;
    },
  },
  methods: {
    async getAdress() {
      const [err, res] = await uni.chooseAddress();
      console.log(res);
      this.addressDetails = res;
      uni.setStorageSync("address_details", this.addressDetails);
    },
    async goOrder() {
      if (!this.addressDetails) {
        return;
      }
      const [err, res] = await uni.getUserProfile({
        desc: "用于完善会员资料", // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      });
      const [err1, { code }] = await uni.login();
      const { encryptedData, rawData, iv, signature } = res;
      const data = { encryptedData, rawData, iv, signature, code };
      console.log(data);
      const [err2, res2] = await uni.request({
        url: "https://api-hmugo-web.itheima.net/api/public/v1/users/wxlogin",
        data,
        method: "POST",
      });
      const { token } = res2.data.message;
      console.log(
        this.cartList.map((goods) => ({
          goods_id: goods.goods_id,
          goods_number: goods.count,
          goods_price: goods.goods_price,
        })),
        this.price
      );
      const user = {
        order_price: this.price,
        consignee_addr: this.ads,
        goods: this.cartList.map((goods) => ({
          goods_id: goods.goods_id,
          goods_number: goods.count,
          goods_price: goods.goods_price,
        })),
      };
      const [err3, res3] = await uni.request({
        url: "https://api-hmugo-web.itheima.net/api/public/v1/my/orders/create",
        method: "post",
        data: user,
        header: {
          Authorization: token,
        },
      });
      const { order_number } = res3.data.message;
      const [err4, res4] = await uni.request({
        url:
          "https://api-hmugo-web.itheima.net/api/public/v1/my/orders/req_unifiedorder",
        method: "POST",
        data: { order_number },
        header: {
          Authorization: token,
        },
      });
      const { pay } = res4.data.message;
      const [err5, res5] = await uni.requestPayment(pay);
    },
  },
};
</script>

<style lang="scss" scoped>
.pages {
  height: 100%;
  background-color: #eee !important;
  padding-top: 20rpx;
}
.address {
  width: 710rpx;
  height: 187rpx;
  padding: 16rpx 17rpx 34rpx 29rpx;
  color: #434343;
  font-size: 30rpx;
  font-weight: 700;
  margin: 20rpx;
  margin-top: 0;
  background-color: #fff;
  .user {
    display: flex;
    color: #434343;
    font-size: 26rpx;
    font-weight: 400;
    margin-top: 18rpx;
    .name {
      margin-right: 20rpx;
    }
  }
}
.goods_cart {
  background-color: #fff;
  margin: 35rpx 20rpx 35rpx;

  .cart {
    .goods-list {
      .goods {
        display: flex;
        padding: 10rpx;
        border-bottom: 1rpx solid #eee;
      }

      .goods-img {
        flex: 2;
        padding: 10rpx;
      }

      .goods-info {
        flex: 3;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .goods-tool {
          display: flex;
          justify-content: space-between;
          .goods-price {
            font-size: 30rpx;
            color: $themeColor;
          }

          .goods-count {
            width: 150rpx;
            justify-content: space-between;
            display: flex;
          }
        }
      }
    }
  }
  .status-tool {
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    background-color: #fff;
    height: 80rpx;
    border-top: 1rpx solid #eee;
    display: flex;
    padding: 0 10rpx;
    align-items: center;
    justify-content: space-between;

    .price {
      flex: 1;
      padding: 0 30rpx;
      text {
        font-size: 30rpx;
        color: $themeColor;
      }
    }

    .settle {
      width: 170rpx;
      height: 50rpx;
      font-size: 24rpx;
      border-radius: 25rpx;
      background-color: $themeColor;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
